<template>
    <view class="search-header">
        <view class="search-wrap">
            <text class="icon iconfont icon-sousuo"></text>
            <input class="search-input" v-model="keyword" type="text" :placeholder="placeholder">
            <text class="icon iconfont icon-guanbi" v-if="keyword" @click="handlerClearKeyword"></text>
        </view>
        <view class="search-btn" @click="handlerSearch()">搜索</view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

// defineProps({
//     "placeholder": {
//         type: String,
//         default: '搜索商品'
//     }
// })

// 当使用基于类型的声明时，我们失去了为 props 声明默认值的能力。这可以通过 withDefaults 编译器宏解决：
withDefaults(defineProps<{
    isShowBackTop?: string
}>(), {
    isShowBackTop: '搜索商品'
})

// 运行时，方式
// const emit = defineEmits(['search'])

// 基于类型，方式
const emit = defineEmits<{
    (e: 'search', keyword: object): void
}>()


// 搜索关键字
const keyword = ref('')

// 清除搜索关键字
const handlerClearKeyword = () => {
    keyword.value = ''
}

// 处理搜索
const handlerSearch = () => {
    emit('search', {keyword})
}
</script>

<style lang="scss">
.search-header {
    background-color: #008000;
    height: 90rpx;
    display: flex;
    align-items: center;
    color: #ccc;

    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;



    .search-wrap {
        display: flex;
        align-items: center;
        flex: 1;

        background-color: #fff;
        margin-right: 10rpx;
        padding: 8rpx 10rpx;
        border-radius: 2rpx;


        .icon {
            font-size: 50rpx;
            color: #008000;
        }
        .icon-guanbi {
            font-size: 40rpx;
            color: #ccc;
        }
        .search-input {
            padding: 0 10rpx 0 10rpx;
            width: 100%;
            color: #000;
        }
    }

    .search-btn {
        width: 120rpx;
        text-align: center;
        border: 2rpx solid #fff;
        color: #fff;
        padding: 12rpx 0;
        border-radius: 2rpx;
        background-image: radial-gradient(circle, #50ED50, #008000);
    }
}
</style>